import{ useEffect } from 'react';
import './index.css'; 
import Features from './feature';

// 主页面组件
const MainPage = () => {

  useEffect(() => {
    // 确保VANTA库已经加载
    if (typeof VANTA === 'undefined') return;

    // 初始化VANTA.NET
    // eslint-disable-next-line no-undef
    const vantaEffect = VANTA.NET({
      el: "#vanta-background",
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 250.00, // 更新为新的最小高度
      minWidth: 200.00,  // 更新为新的最小宽度
      scale: 1.00,
      scaleMobile: 1.00,
      color: 0xeed0f9,   // 更新为新的颜色
      backgroundColor: 0x170d27 // 添加背景色
    });

    // 当组件卸载时清理VANTA效果
    return () => vantaEffect.destroy();
  }, []);

  return (
    <div style={{marginTop: '30px'}}>
      <div style={{ marginTop: '30px' }}>
        <div id="vanta-background" className="header-container">
          <div className="left-side">
            <div className="text-container">
              <h1>LinguaLeap</h1>
              <p>Give you a different English learning experience</p>
            </div>
          </div>
        </div>
      </div>

      {/* 特性卡片 */}
      <Features />
    </div>
  );
};

export default MainPage;